<template>
  <div>
    <button class="btn" @click="add">添加</button>
    <v-table  :moves='moves'  ref="table"></v-table>
    <v-form v-show="isShow" :msg='msg' ref="form" ></v-form>
  </div>
</template>

<script>
import vForm from "./form.vue";
import vTable from "./table.vue";
  
export default {
  data() {
    return {
      isShow: false,
      msg:'',
      moves:[
          {
                    id:1,
                    title:'娱乐新闻',
                    content:'娱乐新闻内容'
                },
                {
                    id:2,
                    title:'军事新闻标题',
                    content:'军事新闻内容'
                },
                {
                     id:3,
                     title:'财经新闻',
                     content:'财经新闻内容'
                }
      ],
    
      
    };
  },
  mounted() {
      this.$refs.form.$on('changeIsShow',this.changeShow)
      this.$refs.form.$on('addList',this.addList)
      this.$refs.table.$on('xiugai',this.xiugai)
      this.$refs.table.$on('shanchu',this.shanchu)
  },
  components: {
    vTable,
    vForm
  },
  methods: {
    //添加
    add() {
        this.isShow = true;
        this.msg = '添加'

    },
    //取消
    changeShow(){
        this.isShow = false
        console.log('点击了取消');
        
        
    },
    addList({title,msg1}){
        this.isShow = false
        this.moves.push({title,content:msg1})
        console.log('添加了一条数据');
        
    },

    //修改
    xiugai(id){
   const result= this.moves.find(item=>item.id===id);
                       this.dia={...result}
 
                   
                     this.isShow=true


    },
    //删除
    shanchu(index){
        this.moves.splice(index, 1);
       
    }
    
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.btn {
  width: 50px;
  height: 20px;
  position: fixed;
  right: 250px;
  top: 20px;
}
</style>